<%@ page import="com.MusicWeb.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: 小胖
  Date: 2021/5/7
  Time: 22:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>音乐管理</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-image: url("../static/img/5.jpg");
    }

    #all {
        width: 1000px;
        height: 600px;
        margin: 0 auto;
        overflow: scroll;
        overflow-y: auto;
        background-color: white;
        border: 3px solid #716e72;
    }

    #allMusic{
        width: 1000px;
        padding: 20px;
        text-align: center;
    }

    .music-th th {
        width: 50%;
        display: inline-block;
    }

    .music-th-id {
        text-align: center;
        width: 62px;
    }

    #allMusic th {
        height: 40px;
        line-height: 40px;
        background-color: #beb8ca;
    }

    #allMusic td {
        height: 30px;
        line-height: 30px;
    }

    #allMusic a{
        color: black;
    }

    /*图标*/
    @font-face {
        font-family: 'iconfont';
        src: url('../iconfont/iconfont.eot');
        src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../iconfont/iconfont.woff2') format('woff2'),
        url('../iconfont/iconfont.woff') format('woff'),
        url('../iconfont/iconfont.ttf') format('truetype'),
        url('../iconfont/iconfont.svg#iconfont') format('svg');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    tr:nth-child(even) {
        background: #dcdcdc;
    }

    tr:nth-child(odd) {
        background: #ffffff;

    }

</style>
<body>
<%--通用代码，每个页面都引入--%>
<%@ include file="../components/base.jsp" %>
<div id="all">
    <h1 style="padding: 20px">歌曲管理</h1>

    <%
        User user = (User) request.getSession().getAttribute("user");
        Integer u_id = user.getId();
    %>

    <input id="user" type="text" value="<%= u_id %>" style="display: none">

    <table id="allMusic">

    </table>

</div>
</body>
<script>

    // 获取管理员id

    var adminID = $('#admin').val();

    // 歌曲
    var musicList = [];

    function Music() {
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/userselectmusic?id=1',
            dataType: 'json',
            success: function (res) {
                musicList = res;
                if (res != null) {
                    $('#allMusic').html(`
                        <tr>
                            <th class="music-th-id"></th>
                            <th class="music-th">标题</th>
                            <th class="music-th" onclick="">歌手</th>
                            <th class="music-th-id">上传者</th>
                            <th class="music-th">操作</th>
                        </tr>
                    `);
                    for (let i = 0; i < musicList.length; i++) {
                        $('#allMusic').append(`
                            <tr>
                                <td id="tdcolor" class="music-th-id">${i+1}</td>
                                <td id="tdcolor" class="music-th">
                                    <a href="javascript:;">${musicList[i].music_name}</a>
                                </td>
                                <td id="tdcolor" class="music-th">${musicList[i].music_singer}</td>
                                <td>
                                    <a id="username" href="javascript:;">${musicList[i].user_name}</a>
                                </td>
                                <td>
                                    <a href="" onclick="delMusic(${musicList[i].id})">删除</a>
                                </td>
                            </tr>
                        `)
                    }
                }
            }
        })
    }

    Music();
    
    function delMusic(id) {
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/musicdel?id=${id}`,
            dataType: "json",
            success:function (res) {
                alert("删除成功");
            }
        })
    }
</script>
</html>

